<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
		<!-- Bootstrap -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<style>
			.container {
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="container" id="app">
			<form class="form-inline">
				<div class="form-group">
					<label for="">id</label>
					<input type="text" class="form-control" v-model.trim.number="id" required @blur="checkId" />
				</div>
				<div class="form-group">
					<label for="">名称</label>
					<input type="text" class="form-control" v-model.trim="name" required />
				</div>
				<div class="form-group">
					<label for="">价格</label>
					<input type="text" class="form-control" v-model.trim="price" required />
				</div>
				<button type="submit" class="btn btn-default" @click.prevent="addCar">添加</button>
			</form>
			<div class="form-group">
				<label for="">根据名称过滤</label>
				<input type="text" class="form-control" v-model="searchText" @keyup.enter="searchCar" />
			</div>
			<table class="table table-striped" v-if="showAll">
				<tr>
					<th>id</th>
					<th>名称</th>
					<th>价格</th>
					<th>操作</th>
				</tr>
				<tr v-for="(car,index) in cars">
					<td>{{car.id}}</td>
					<td>{{car.name}}</td>
					<td>{{car.price}}</td>
					<td><a href="#" @click="deleteCar(car)">删除</a></td>
				</tr>
			</table>
			<table class="table table-striped" v-else>
				<tr>
					<th>id</th>
					<th>名称</th>
					<th>价格</th>
					<th>操作</th>
				</tr>
				<tr v-for="(car,index) in searchCars">
					<td>{{car.id}}</td>
					<td>{{car.name}}</td>
					<td>{{car.price}}</td>
					<td><a href="#" @click="deleteCar(car)">删除</a></td>
				</tr>
			</table>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
		</script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
		</script>
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					id: '',
					name: '',
					price: '',
					searchText: '',
					searchCars: [],
					showAll: true,
					cars: [{
						id: 1,
						name: '宝马',
						price: '20W'
					}, {
						id: 2,
						name: '宝石',
						price: '20W'
					}, {
						id: 3,
						name: '宝骏',
						price: '20W'
					}, {
						id: 4,
						name: '奥迪',
						price: '20W'
					}]
				},
				methods: {
					addCar: function() {
						if (this.id === '' || this.name === '' || this.price === '') {
							alert("ID、名称、价格必填！");
							return;
						}
						let newCar = {
							id: this.id,
							name: this.name,
							price: this.price
						}
						this.cars.push(newCar);
						this.id = this.name = this.price = '';
					},
					checkId: function() {
						for (var i = 0; i < this.cars.length; i++) {
							if (this.cars[i].id === this.id) {
								alert("id已经存在，请重新输入！");
								this.id = '';
								break;
							}
						}
					},
					searchCar: function() {
						this.showAll = false;
						this.searchCars = [];
						for (var i = 0; i < this.cars.length; i++) {
							if (this.cars[i].name.indexOf(this.searchText) !== -1) {
								this.searchCars.push(this.cars[i])
							}
						}
					},
					deleteCar: function(car) {
						this.cars.splice(this.cars.indexOf(car), 1);
						if (this.showAll === false) {
							this.searchCars.splice(this.searchCars.indexOf(car), 1);
						}
					}
				}
			})
		</script>
	</body>
</html>
